<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="userinfos"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="batchEdit" type="selection" width="55">
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="scope"
          ><router-link :to="{ name: 'User', params: { id: scope.row.user } }"
            ><el-avatar :src="scope.row.avatar" alt="头像"></el-avatar
          ></router-link>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" width="120"></el-table-column>
      <el-table-column prop="address" show-overflow-tooltip align="right">
        <template slot="header">
          <el-button type="primary" size="mini" @click="batchEdit = !batchEdit" :disabled="!editable"
            >{{batchEdit?"取消批量修改":"批量修改"}}</el-button
          >
        </template>
        <template slot-scope="scope"
          ><el-button type="danger" size="mini" @click="remove(scope.row.id)" v-if="editable"
            >{{userType=='followers'?"移除粉丝":"取消关注"}}</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()" v-if="batchEdit" size="mini"  :disabled="multipleSelection.length==0"
        >取消选择</el-button
      >
      <el-button @click="batchHandle()" v-if="batchEdit" type="primary" size="mini"  :disabled="multipleSelection.length==0"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userinfoId: {
      type: Number,
      default: null,
    },
    userType: {
      type: String,
      validator(value) {
        return ['followers', 'followees'].indexOf(value) !== -1;
      },
    },
    editable:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      userinfos: [],
      batchEdit: false,
      multipleSelection:[],
    };
  },
  mounted() {
    this.get_users();
  },
  computed: {
    url() {
      if (this.userinfoId != null) {
        return `userinfos/${this.userinfoId}/${this.userType}/`;
      }
      return 'userinfos/';
    },
  },
  methods: {
    get_users() {
      this.$http.get(this.url).then((res) => {
        this.userinfos = res.data.results;
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    remove(infoId) {
      if(this.userType=="followees"){
        this.$emit("unfollow", infoId+Date.now())
      }else{
        this.$http.post("userinfos/remove_followers/", {infos:[infoId]}).then(()=>{
          this.$message({message:"移除粉丝成功", type: 'success', duration: 1000})
          this.$emit("removeFollowers", infoId+Date.now())
        })
      }   
    },
    batchHandle(){
      let url="userinfos/batch_unfollow/"
      let msg="批量取消关注成功"
      let signal = "updateUnfollowKey"
      if(this.userType=="followers"){
        url = "userinfos/remove_followers/"
        msg = "批量移除粉丝成功"
        signal = "removeFollowers"
      }
      this._batchHandle(url, msg, signal)
    },
    _batchHandle(url, msg, signal){
      let infos = this.multipleSelection.map(obj=>{return obj.id})
      this.$http.post(url, {infos}).then(()=>{
        this.$message({message:msg, type: 'success', duration: 1000})
        this.$emit(signal, infos.join(',')+Date.now())
      })
      this.batchEdit = false
    },
  },
};
</script>

<style>
</style>
